<template>
    <div ref="echart"></div>
</template>

<script>
import { defineComponent, getCurrentInstance, watch, computed, reactive } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
    props: {
        isAxisChart: {
            type: Boolean,
            default: true  // 定义默认值
        },
        chartData: {
            type: Object
        }
    },
    setup(props) {
        const { proxy } = getCurrentInstance();
        let newChartData = reactive({})
        const initChart = () => {
            initChartData()
            if (newEchart) { // 判断是否已经渲染echarts
                newEchart.setOption(options)
            } else {
                newEchart = echarts.init(proxy.$refs['echart'])
                newEchart.setOption(options.value)
            }
        }
        const options = computed({
            get: () => {
                return props.isAxisChart ? axisOption : normalOption
            }
        })
        const initChartData = () => {
            if (props.isAxisChart) {
                axisOption.xAxis.data = newChartData.xData
                axisOption.series = newChartData.series
            } else {
                normalOption.series = newChartData.series
            }
        }
        let axisOption = {
            legend: {
                // 图例文字颜色
                textStyle: {
                    color: "#333",
                },
            },
            grid: {
                left: "20%",
            },
            // 提示框
            tooltip: {
                trigger: "axis",
            },
            xAxis: {
                type: "category", // 类目轴
                data: [],
                axisLine: {
                    lineStyle: {
                        color: "#17b3a3",
                    },
                },
                axisLabel: {
                    interval: 0,
                    color: "#333",
                },
            },
            yAxis: [
                {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                            color: "#17b3a3",
                        },
                    },
                },
            ],
            color: ["#2ec7c9", "#b6a2de"],
            series: [],
        }
        let normalOption = {
            tooltip: {
                trigger: "item",
            },
            color: [
                "#0f78f4",
                "#dd536b",
                "#9462e5",
                "#a6a6a6",
                "#e1bb22",
                "#39c362",
                "#3ed1cf",
            ],
            series: [],
        }
        let newEchart = null
        watch(
            () => props.chartData,
            () => {
                setTimeout(()=>{
                    newChartData = JSON.parse(JSON.stringify(props.chartData))
                    initChart();
                },200)
            },
            {
                deep: true, // 深度监听
                // immediate: true
            }
        )
        return {
            props
        }
    },
})
</script>
